<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>jQuery 鼠标事件示例2-4</title>
		<style>
			div{
				border:1px solid;
				text-align:center;
			}
			#box01{
				width:500px;
				height:200px;
				margin:20px;
			}
			#box02{
				width:400px;
				height:100px;
				margin:50px;
			}
		</style>
		<script src="js/jquery-3.6.1.min.js"></script>
		<script>	
			$(document).ready(function(){	
				var xOver=xOut=0;//统计鼠标进入或离开次数
				//触发段落元素<p>的mouseenter()事件	
				$("#box01").mouseover(function(){
					//鼠标进入次数自增1
					xOver++;
					//更新提示语句
					$("#tip01").text(xOver);					  
			 	}); 
				
				//触发段落元素<p>的mouseleave()事件	
				$("#box01").mouseout(function(){
					//鼠标离开次数自增1
					xOut++;
					//更新提示语句
					$("#tip02").text(xOut);
			 	});
			});
        </script>  
    </head>
    <body>
        <h3>jQuery 鼠标事件mouseover()与mouseout()示例</h3>
        <hr>
		<div id="box01">
			父元素
			<div id="box02">
				子元素<br /><br />
				发生mouseover()事件的次数：<span id="tip01">0</span>
				<br />
				发生mouseout()事件的次数：<span id="tip02">0</span>
			</div>
		</div>
	</body>
</html>